<template>
  <view class="page">
	  <mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
    <view class="bg"  :style="{ background: 'url('+$_BASE_IMG_API+'/images/balancebg.png)  no-repeat','background-size': '100% 100%'}">
		<view class="position-relative flex flex-column align-center u-p-t-30">
        <text class="u-p-t-30 u-font-30" style="color:#f3e9db">金额(元)</text>
    		<text class="u-p-t-30 font-weight-bold u-font-40 text-white">¥ {{thousandsSeparator(userInfo.credit1,false) || '0.00'}}</text>
    	</view>
    </view>
		<view class="bg-white">
			<!-- <u-cell-item title="账户明细" @click="toPage(1)">
				<u-icon class="u-p-r-20" slot="icon" size="42" :name="$_BASE_IMG_API+'/images/balance1.png'"></u-icon>
			</u-cell-item>
			<u-cell-item title="奖金明细" @click="toPage(2)">
				<u-icon class="u-p-r-20" slot="icon" size="42" :name="$_BASE_IMG_API+'/images/balance2.png'"></u-icon>
			</u-cell-item> -->
			<u-cell-item title="充值" @click="toPage(3)">
				<u-icon class="u-p-r-20" slot="icon" size="42" :name="$_BASE_IMG_API+'/images/balance3.png'"></u-icon>
			</u-cell-item>
			<u-cell-item title="提现" @click="toPage(4)">
				<u-icon class="u-p-r-20" slot="icon" size="42" :name="$_BASE_IMG_API+'/images/balance4.png'"></u-icon>
			</u-cell-item>
		</view>
		<view class="">
			<view class="u-m-t-40 u-m-l-30 font-32 font-weight-bold" style="color:#333333">
				余额明细
			</view>
			<view class="u-m-t-20 rounded-10"  >
				<view class="u-p-x-30 u-p-y-20 bg-white" >
					<block v-for="(item,index) in infoList" :key="index">
						<view class="flex align-center justify-between u-p-y-20 u-border-bottom">
							<view class="flex flex-column" style="width: 80%;">
								<text>{{item.remark}}</text>
								<text class="text-greey u-p-t-20">{{item.createtime}}</text>
							</view>
							<text>{{item.num}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		</mescroll-body>
  </view>
	
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { MineCenterApi } from '@/api/serves.js'
	import {thousandsSeparator} from "@/common/utils/utils.js"
	const urls = {
		1: '/pages/mine/mineBalance/balanceAcountDetail/balanceAcountDetail',
		2: '/pages/mine/mineBalance/balanceBonusDetail/balanceBonusDetail',
		3: '/pages/mine/mineBalance/balanceRechage/balanceRechage',
		4: '/pages/mine/mineBalance/balanceWithdraw/balanceWithdraw'
	}
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return{
				thousandsSeparator,
				current: 0,
                menuNumInfo:uni.getStorageSync('menuNumInfo'),
				infoList: [],
			}
		},
		onLoad(options){
			this.current = options.current
		},
		methods: {
			toPage(index) {
				if(index==1){
					uni.navigateTo({
						url: urls[index]+'?current='+this.current
					})
					return
				}
				uni.navigateTo({
					url: urls[index]
				})
			},
			back(){
                uni.navigateBack({delta: 1});
            },
			// 下拉刷新回掉
			downCallback() {
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {
				MineCenterApi.Ccdetails({type: 1, page: page.num}).then(res=> {
					console.log('积分明细', res);
					if(res.code == 1){
						let result = res.data
						if(page.num == 1) this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = this.infoList.concat(result); //追加新数据
						setTimeout(()=>{
							this.mescroll.endByPage(result.length, result.totalpage)
							uni.hideLoading();
						},20)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
  .page {
    min-height: 100vh;
    background-color: #f9f9f9;
  }
.bg {
  width: 750rpx;
  height:270rpx;
}
</style>
